<template>
  <div style="z-index: 1; height: 500px; padding-top: 5px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import {
  getOperatorActivityDevicetrend,
  exportActiveDevices
} from '@/api/operator'
import common from '@/utils/common'

export default {
  name: 'NewActivateChart',
  mixins: [resize],
  data() {
    return {
      operator: null,
      series: [],
      chart: null,
      month: '',
      emptyVisible: false,
      legend: [],
      drilldownData: [
        {
          dataGroupId: '200007',
          data: [
            ['N910', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
          ]
        }
      ]
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    exportActiveDevices() {
      const param = {
        oid: this.operator.oid,
        onlineDay: 5,
        dateRange: 6
      }
      if (this.month) {
        param.summaryMonth = this.month
      }
      exportActiveDevices(param)
        .then((res) => {
          common.downloadFile(res, 'Active-Devices-All', '.xlsx')
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },

    initData() {
      this.operator = JSON.parse(localStorage.getItem('operator-info'))
      var params = {
        dateRange: 6,
        oid: this.operator.oid,
        onlineDay: 5
      }
      getOperatorActivityDevicetrend(params)
        .then((res) => {
          this.drilldownData = res.drillDownData
          this.initChart(res)
        })
        .catch((e) => {
          this.emptyVisible = true
          this.$confirmError(e)
        })
    },

    initChart(data) {
      this.chart = echarts.init(this.$el)
      this.option = {
        // title: {
        //   text: this.$t('dashboard.top_10_merchants_and_active_merchants'),
        //   subtext: '纯属虚构'
        // },
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: data.xaxisData
          }
        ],
        yAxis: {},
        series: [
          {
            // name: this.$t('data_center.appstore_new_app_version_count'),
            name: 'Activity Devices',
            type: 'line',
            symbolSize: 10,
            data: data.groupData,
            universalTransition: {
              enabled: true,
              divideShape: 'clone'
            }
          }
        ]
      }
      const _this = this
      // 避免上次的绑定导致双击
      this.chart.off('click')
      this.chart.on('click', function (event) {
        console.log('click')
        if (event.name) {
          var subData = _this.drilldownData.find(function (data) {
            return data.dataGroupId === event.name
          })
          if (!subData || !subData.data.length) {
            return
          }
          _this.month = event.name
          _this.chart.setOption(
            {
              tooltip: {
                trigger: 'axis'
              },
              xAxis: [
                {
                  type: 'category',
                  data: subData.data.map(function (item) {
                    return item[0]
                  })
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: {
                name: 'value',
                type: 'bar',

                data: subData.data.map(function (item) {
                  return item[1]
                }),
                universalTransition: {
                  enabled: true,
                  divideShape: 'clone'
                }
              },
              graphic: {
                elements: [
                  {
                    type: 'image',
                    right: 32,
                    top: 10,
                    style: {
                      image: require('@/assets/images/back.png'),
                      width: 32,
                      height: 32
                    },
                    onclick: function () {
                      _this.month = ''
                      _this.chart.setOption(_this.option, true)
                    }
                  }
                ]
              }
            },
            true
          )
        }
      })
      this.chart.setOption(this.option, true)
    }
  }
}
</script>

<style>
</style>
